import React, { PureComponent } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Form, Input, Button, message, Upload, InputNumber, Col, Row } from 'antd'
import { setBanner, getBanner } from '@/services/setting';
const layout = {
    labelCol: { span: 0 },
    wrapperCol: { span: 10 },
}
class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            list: [
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
                { file: '', content: '', sort: '' },
            ]
        }
    }
    changeFile = (info: any, index: number) => {
        let fileList = [...info.fileList];
        fileList = fileList.slice(-1);
        fileList = fileList.map(file => {
            if (file.response) {
                file.url = file.response.url;
            }
            return file;
        });
        const { list } = this.state;
        list[index].file = fileList
        list[index].old_doc = ''
        this.setState({ list: [...list] });
    };
    changeContent = (e: any, index: number) => {
        const { list } = this.state;
        list[index].content = e.target.value
        this.setState({ list: [...list] });
    }
    changeSort = (e: any, index: number) => {
        const { list } = this.state;
        list[index].sort = e
        this.setState({ list: [...list] });
    }
    addHandle = () => {
        const { list } = this.state;
        if (list.length >= 10) return message.error('已达到上限')
        list.push({ file: '', content: '', sort: '' });
        this.setState({ list: [...list] });
    }
    deleteHandle = (index: number) => () => {
        const { list } = this.state;
        if (list.length <= 1) return message.error('至少添加一个')
        list.splice(index, 1);
        this.setState({ list: [...list] });
    }
    submitHandle = () => {
        const { list } = this.state;
        setBanner(list).then(res=>{
            if(res.static===1){
                message.success('上传成功')
            }else{
                message.error('上传失败')
            }
        });
    }
    componentDidMount() {
        getBanner().then(res => {
            let list = [];
            for (let i = 0; i < 10; i++) {
                list.push({
                    content: res['content' + i],
                    file: [
                        {
                            uid: '-1',
                            name: res['doc' + i],
                            status: 'done',
                            url: 'https://hangda.shejiyuan.com'+res['doc' + i],
                            thumbUrl: 'https://hangda.shejiyuan.com'+res['doc' + i],
                        },
                    ],
                    sort: res['sort' + i],
                })
            }
            this.setState({
                list: [...list]
            })
        })
    }
    render() {
        const { list } = this.state;
        return (
            <PageContainer>
                <Card bordered={false}>
                    {/* <Button type="primary" onClick={this.addHandle}>添加</Button> */}
                    <Form {...layout}>
                        <Row>

                            {
                                list.map((item: any, index: number) => {
                                    return <Col span={12} key={index} style={{ marginBottom: 20, borderBottom: '1px solid #ddd' }}>
                                        <Form.Item label={'图片' + (index + 1)}>
                                            <Upload  onChange={(e: any) => this.changeFile(e, index)} fileList={item.file} beforeUpload={() => { return false }}>
                                                <Button>上传</Button>
                                            </Upload>
                                        </Form.Item>
                                        <Form.Item label={'内容' + (index + 1)}>
                                            <Input onChange={(e: any) => this.changeContent(e, index)} placeholder="内容" value={item.content}></Input>
                                        </Form.Item>
                                        <Form.Item label={'排序' + (index + 1)}>
                                            <InputNumber min={0} placeholder="排序" onChange={(e: any) => this.changeSort(e, index)} value={item.sort}></InputNumber>
                                            {/* <Button style={{marginLeft:10}} onClick={this.deleteHandle(index)}>删除</Button> */}
                                        </Form.Item>
                                    </Col>
                                })
                            }

                        </Row>
                        <Button type="primary" onClick={this.submitHandle}>提交</Button>
                    </Form>
                </Card>
            </PageContainer>
        );
    }
}

export default Index;
